<template>
	<view class="box" >
		<diyNavBar value='新手指南' :fixed="true" color="#FF6F30"></diyNavBar>
		<view class="head-nav"></view>
		<view class="topbody">
			<scroll-view class="scroll-Y" scroll-y="true" @scrolltolower='scrolltolower' ref="scrolly" >
				<view class="title">新手指南</view>
				<view class="text" ref="txt" v-html='content.value'></view>
			</scroll-view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	export default{
		components:{
			loadingCover,diyNavBar
		},
		data(){
			return {
				content:''
			}
		},
		onShow() {
			this.getData();
			this.$nextTick(()=>{
				setTimeout(()=>{
					let txtHeight = this.$refs.txt.$el.clientHeight;
					if(txtHeight > 577) return false;
					this.setStatus();
				},3000)
			})

		},
		methods:{
			getData(){
				this.$http.sendrequest('/index/Newbie',{},{
					tokenJudge:true
				}).then(res=>{
					if(res.code == 1){
						this.content = res.data;
						if(this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			},
			scrolltolower(){
				this.setStatus()
			},
			//阅读完成
			setStatus(){
				this.$http.sendrequest('/NoviceRecord/SharingAdd',{
					id:1,
					status:0
				},{
					tokenJudge:true
				}).then(res=>{})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 100%;
		min-height: 100vh;
		background: $uni-content-background-color;
		padding-top: 100rpx;
		.scroll-Y{
			height: 1140rpx;
		}
		.topbody{
			margin: 0 30rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top:30rpx ;
			.title{
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}
			.text{
				font-size: 28rpx;
				color: #999999;
				text-indent: 2em;
				line-height: 1.5;
			}
		}
	}
</style>